<template>
  <CommonQueryLayout class="auth-access">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormList"
        :loading="fetchAuthListLoading"
        @query="
          () => {
            pageInfo.current = 1
            getAuthorList()
          }
        "
      />
    </template>
    <template #default>
      <TableTopControl
        title-text="账号列表"
        v-model:table-size="tableStateWrapper.tableSize"
        v-model:table-columns="tableStateWrapper.tableColumns"
        :loading="fetchAuthListLoading"
        @reload-data="getAuthorList"
      >
        <!-- <a-button type="primary">示例操作按钮</a-button> -->
      </TableTopControl>
      <a-table
        bordered
        :size="tableStateWrapper.tableSize"
        :columns="tableStateWrapper.tableColumns"
        :dataSource="tableStateWrapper.tableData"
        :row-selection="rowSelection"
        :pagination="false"
        :loading="fetchAuthListLoading"
        rowKey="id"
      >
        <template #options="{ record }">
          <a-button
            ghost
            size="small"
            type="primary"
            v-if="record.status !== AuditStatus.WAIT"
            :disabled="record.source !== Source.PLUS"
            @click="openQueryAuditDialog(record)"
            >查看审核信息</a-button
          >
          <a-button
            size="small"
            type="primary"
            @click="openAuditDialog(record)"
            :disabled="record.source !== Source.PLUS"
            :loading="updateAuthorStatusLoading"
            v-else
            >审核</a-button
          >
          <!-- <template v-if="record.status === AuditStatus.ACCESS">
              <a-popconfirm
                title="确定再签约吗？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="contract(record.id)"
              >
                <a-button
                  size="small"
                  type="primary"
                  :loading="updateAuthorStatusLoading"
                  :disabled="record.source !== Source.PLUS"
                  v-if="record.contractStatus === ContractStatus.UNCONTRACT"
                  >再签约</a-button
                >
              </a-popconfirm>
              <a-popconfirm
                title="确定解约吗？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="unContract(record.id)"
              >
                <a-button
                  size="small"
                  type="primary"
                  danger
                  :loading="updateAuthorStatusLoading"
                  :disabled="record.source !== Source.PLUS"
                  v-if="record.contractStatus === ContractStatus.NORMAL"
                  >解约</a-button
                >
              </a-popconfirm>
            </template> -->
        </template>
      </a-table>
      <div class="auth-access__page-wrapper">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
        />
      </div>
    </template>
  </CommonQueryLayout>
  <AuditAuthDialog
    :dialog-state="auditDialogState"
    @cancel="onCloseAuditDialog"
    @ok="confirmAuditDialog"
    @check-auth-works="openAuthWorksDialog"
    :check-auth-works-loading="fetchAuthWorksLoading"
    :loading="updateAuthorStatusLoading"
  />
  <AuthMaterialListDialog :dialog-state="authworksDialogState" />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import { AuditStatus, Source } from '@/api/audit/auth/model/authorModel'

import useSearchAuthor from './hooks/useSearchAuthor'
import useAuditAuthor from './hooks/useAuditAuthor'
import useGetAuthworks from './hooks/useGetAuthworks'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { QueryForm } from '@/components/Form'
import AuditAuthDialog from './components/AuditAuthDialog.vue'
import AuthMaterialListDialog from './components/AuthMaterialListDialog.vue'

const {
  queryFormBind,
  queryFormList,
  fetchAuthListLoading,
  getAuthorList,
  tableStateWrapper,
  rowSelection,
  pageInfo,
  pageChange,
  pageSizeChange,
  formatTotalPageText,
} = useSearchAuthor()

const {
  auditDialogState,
  openAuditDialog,
  onCloseAuditDialog,
  confirmAuditDialog,
  openQueryAuditDialog,
  updateAuthorStatusLoading,
} = useAuditAuthor(getAuthorList)

const { openAuthWorksDialog, authworksDialogState, fetchAuthWorksLoading } =
  useGetAuthworks()

onMounted(async () => {
  await getAuthorList()
})
</script>

<style lang="scss" scoped>
@include b(auth-access) {
  @include e(page-wrapper) {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
</style>
